<template>
  <view class="coupon">
    <view class="coupon-tab flex flex-align">
      <view class="coupon-tab-item flex-1 flex flex-align flex-center" :class="{ 'coupon-tab-item-active': tanInx === 0 }" @click="tanIndex(0)">未使用 ({{couponInfo.unused_count||0}})</view>
      <view class="coupon-tab-item flex-1 flex flex-align flex-center" :class="{ 'coupon-tab-item-active': tanInx === 1 }" @click="tanIndex(1)">已使用 ({{couponInfo.used_count||0}})</view>
      <view class="coupon-tab-item flex-1 flex flex-align flex-center" :class="{ 'coupon-tab-item-active': tanInx === 2 }" @click="tanIndex(2)">已作废 ({{couponInfo.void_count||0}})</view>
    </view>
    <view style="height: 90rpx;"></view>
    <view class="coupon-list">
      <view class="coupon-title" v-if="couponInfo.coupon">优惠券</view>
      <view class="coupon-item" v-for="(item, index) in couponInfo.coupon" :key="index">
        <view class="couponone flex">
          <view class="coupon-item-left">
            <view class="coupon-item-left-title"><text>￥</text>{{ item.coupon_price }}</view>
              <view class="coupon-item-left-subtitle">满{{ item.use_limit_price }}可用</view>
          </view>
          <view class="coupon-item-right flex flex-direction flex-bt">
            <view class="coupon-item-right-top">{{ item.coupon_name }} <text> x{{ item.num }}</text></view>
            <view class="coupon-item-right-center">有效期至{{timestampToDateTimes(item.earliest_at)}} <text @click="openCoupon(item)">查看详情</text></view>
            <view class="coupon-item-right-bottom">{{ item.desc }}</view>
          </view>
          <view class="status flex flex-align flex-center">{{ item.status==0?'未 使 用':item.status==1?'已 使 用':'已 作 废' }}</view>
          <view class="zhezhao" v-if="item.status!=0"></view>
        </view>
      </view>
      <view class="coupon-title" v-if="couponInfo.exchange">兑换券</view>
      <view class="coupon-item" v-for="(item, index) in couponInfo.exchange" :key="index">
        <view class="coupontwo">
          <view class="bg">
            <view class="two-title flex flex-align flex-bt">
              <view class="two-title-left flex flex-align flex-bt">
                商品兑换券
              </view>
              <view class="two-title-right">有效期至{{timestampToDateTimes(item.earliest_at)}} <text @click="openCoupon(item)">查看详情</text></view>
            </view>
            <view class="two-center">
              <view class="two-center-title">{{ item.coupon_name }} <text> x{{ item.num }}</text></view>
              <view class="two-center-bottom">{{ item.desc }}</view>
            </view>
          </view>
          <view class="wenzi">{{ item.status==0?'未 使 用':item.status==1?'已 使 用':'已 作 废' }}</view>
          <view class="zhezhao" v-if="item.status!=0"></view>
        </view>
      </view>
      <!-- 暂无数据 -->
      <view class="noData" v-if="!couponInfo.coupon&&!couponInfo.exchange">
        <noData acImg="/static/nodata/shenhe.png" content="暂无数据" width="360rpx" color="#666"></noData>
      </view>
    </view>
    <couponDetail ref="couponDetailRef"></couponDetail>
  </view>
</template>

<script lang="ts" setup>
import { couponList } from '@/api/user'
import { onLoad } from '@dcloudio/uni-app'
import { timestampToDateTimes } from '@/utils/tools'
import { ref } from 'vue'
import couponDetail from "./components/couponDetail.vue";
import noData from '@/components/noData.vue';
onLoad(()=>{
  getCouponList()
})
const tanInx = ref(0)
const tanIndex = (index: number) => {
  tanInx.value = index
  getCouponList()
}
const couponInfo = ref<Recordable>([])
// 获取优惠券列表
const couponDetailRef = ref<InstanceType<typeof couponDetail>>()
function getCouponList(){
  couponList({status:tanInx.value}).then((res:any)=>{
    couponInfo.value = res
  })
}
function openCoupon(e: any){
  couponDetailRef.value?.open(e)
}
</script>

<style scoped lang="scss">
  .coupon-tab{height: 90rpx;background: #fff;position: fixed;z-index: 111;top: 0;left: 0;width: 100%;
    .coupon-tab-item{position: relative;height: 100%;border-bottom: 2px solid #fff;}
    .coupon-tab-item-active{color: #FE7431;border-bottom: 2px solid #FE7431;}
  }
  .coupon-list{padding: 30rpx;box-sizing: border-box;
    .coupon-title{margin-bottom: 20rpx;}
    .couponone{background: #fff;border-radius: 16rpx;margin-bottom:20rpx;position: relative;overflow: hidden;
      box-sizing: border-box;
      .zhezhao{position: absolute;z-index: 111;background: rgba($color: #fff, $alpha: .5);width: 100%;height: 100%;top: 0;left: 0;}
      .coupon-item-left{box-sizing: border-box;
        background: url('@/static/user/user25.png') no-repeat;background-size: 100% 100%;width: 180rpx;height: 180rpx;color: #fff;text-align: center;
        .coupon-item-left-title{font-size: 60rpx;font-weight: bold;margin-top: 30rpx;
          text{font-size: 24rpx};
        }
        .coupon-item-left-subtitle{font-size: 22rpx;}
      }
     .coupon-item-right{padding:20rpx;width: 500rpx;box-sizing: border-box;
       .coupon-item-right-top{font-size: 32rpx;font-weight: bold;
        text{font-size: 32rpx;color: #FE7431;}
      }
      .coupon-item-right-center{font-size: 24rpx;color: #999;margin-top: 10rpx;
        text{color: #FE7431;}
      }
     .coupon-item-right-bottom{font-size: 24rpx;color: #999;margin-top: 10rpx;}
     }
     .status{position: absolute;right:-46rpx;top:12rpx;width: 180rpx;height: 50rpx;background: #FE7431;color: #fff;font-size: 22rpx;transform: rotate(45deg);}
    }
  .coupontwo{background: #FE7431;border-radius: 16rpx;margin-bottom:20rpx;position: relative;
    .bg{background: #fff;border-radius: 16rpx;width: 620rpx;
      box-sizing: border-box;
      .two-title{padding: 20rpx;box-sizing: border-box;margin-bottom:30rpx;border-bottom: 1px solid #F8F3F0;
        .two-title-left{font-size: 26rpx;font-weight: bold;color: #323233;padding-left: 10rpx;position: relative;}
        .two-title-left::after{content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 4rpx;height: 20rpx;background: #FE7431;border-radius: 50%;}
        .two-title-right{font-size: 24rpx;color: #999;
          text{color: #FE7431;}
        }
      }
      .two-center{padding: 0 20rpx 20rpx 20rpx;box-sizing: border-box;
        .two-center-title{font-size: 32rpx;font-weight: bold;
         text{font-size: 32rpx;color: #FE7431;}
        }
        .two-center-bottom{font-size: 24rpx;color: #999;margin-top: 10rpx;width: 600rpx;margin-top: 10rpx;}
      }
    }
    .zhezhao{position: absolute;z-index: 111;background: rgba($color: #fff, $alpha: .5);width: 100%;height: 100%;top:0rpx;left: 0rpx;}
   .wenzi{position: absolute;right: 0rpx;top: 0rpx;color: #fff;font-size: 26rpx;writing-mode: vertical-rl;display: flex;align-items: center;justify-content: center;height: 100%;
    width: 70rpx;
  }
  }
}
.noData{padding-top: 10vh;}
</style>